/**
 * Created by zhangy on 2022/8/18.
 */
export default {
    name: 'descriptionsItem',
    componentName: 'descriptionsItem',
    props: {
        label: String,
        span: {
            type: Number,
            default: () => {
                return 1;
            }
        },
        labelWidth: {
            type: String,
            default: '70'
        },
        separator: {
            type: String,
            default: "："
        },
        align: {
            type: String,
            default: 'center'
        },
        labelAlign:{
            type: String,
            default: 'right'
        },
        inline: {
            type: Boolean,
            default: true
        },
        bold: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {}
    },
    computed: {
        owner() {
            let parent = this.$parent;
            return parent;
        }
    },
    methods: {},
    render(h) {
        if (this.owner.border) {
            return h('div', {
                class: 'ep-descriptions__cell',
                style: {
                    flex:this.span
                }
            }, [
                h('th', {
                    class: 'ep-descriptions__item-label ep-descriptions__item-colon',
                }, this.label),
                h('td', {
                    class: 'ep-descriptions__item-content'
                }, this.$slots.default)
            ]);
        } else {
            return h('td', {
                class: {
                    'ep-descriptions__item': true,
                    'ep-descriptions__flex': Number(this.owner.column) === 1
                },
                attrs:{
                    'colspan':this.span
                }
            }, [
                h('div', {
                    class: [
                        this.inline?'ep-descriptions__item-cell-inline':'ep-descriptions__item-cell'
                    ],
                    style:{
                        'align-items':this.align
                    }
                }, [
                    h('span', {
                        class: 'ep-descriptions__item-label',
                        style: {
                            width: (this.owner.labelWidth ? this.owner.labelWidth : this.labelWidth) + 'px !important',
                            'text-align':this.labelAlign,
                            'font-weight':this.bold?'bold':'normal',
                            'color':this.bold?'#333':'',
                            'marginBottom':this.bold?'10px':''
                        }
                    }, this.label + (this.owner.separator ? this.owner.separator : this.separator)),
                    h('span', {
                        class: 'ep-descriptions__item-content',
                        style: {
                            width: 'calc(100% - ' + (this.owner.labelWidth ? this.owner.labelWidth : this.labelWidth) + 'px)'
                        }
                    }, this.$slots.default)
                ])
            ]);
        }
    }
}
